<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-图书详情</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    .left-book-info-small-title{
        width:200px;
    }
    .right-book-info-small-title{
        width:200px;
        border-bottom:1px solid black;
        flex-grow: 1;
    }
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4 df">
        <div id="leftDiv">
            <img :src="'/book/getLocalSystemPic?filePath=' + bookInfo.picUrl" alt="Smiley face" width="320"  >
        </div>
        <div id="rightDiv" class="df fdc ml-9" style="    flex-grow: 1;">
            <h2 style="font-size: 1.1667em;">{{bookInfo.bookName}}</h2>
            <div class="df">
                <span class="left-book-info-small-title">作者:</span>
                <span class="right-book-info-small-title">{{bookInfo.author}}</span>
            </div>
            <div class="df mt-3">
                <span class="left-book-info-small-title">ISBN:</span>
                <span class="right-book-info-small-title">{{bookInfo.isbn}}</span>
            </div>
            <div class="df mt-3">
                <span class="left-book-info-small-title">价格:</span>
                <span class="right-book-info-small-title">
                    {{bookInfo.currencyTypeDesc}}
                    <span class="ml-2">{{bookInfo.price}}</span>
                </span>
            </div>

            <div class="df mt-3">
                <span class="left-book-info-small-title">语种:</span>
                <span class="right-book-info-small-title">{{bookInfo.languageDesc}}</span>
            </div>
            <div class="df mt-3">
                <span class="left-book-info-small-title">载体形态:</span>
                <span class="right-book-info-small-title">
                    <span v-if="bookInfo.pageMeta != null && bookInfo.pageMeta > 0 ">{{bookInfo.pageMeta}}页</span>
                    <span>{{bookInfo.carrierForm}}</span>
                </span>
            </div>
            <div class="df mt-3">
                <span class="left-book-info-small-title">出版发行:</span>
                <div class="right-book-info-small-title df">
                    <span >{{bookInfo.publish}}</span>
                    <span class="ml-2">{{bookInfo.publishPlace}}</span>
                    <span class="ml-2">{{bookInfo.publishYear}}</span>
                </div>
            </div>
            <div class="df mt-3" v-for="(item) in mainResponsibilityTableData ">
                <span class="left-book-info-small-title">主要责任者:</span>
                <span class="right-book-info-small-title">{{item.responsibilityName}}</span>
            </div>
            <div class="df mt-3">
                <span class="left-book-info-small-title">版次:</span>
                <span class="right-book-info-small-title">{{bookInfo.revision}}</span>
            </div>
            <div class="df mt-3">
               <el-button type="primary" size="small" @click="showBookCommentMethod()">书籍评论</el-button>
            </div>

        </div>
    </div>
    <div class="mt-4 ml-4 " style="margin-bottom:200px;">
        <h2 style="font-size: 1.1667em;">库存信息</h2>
        <el-table :data="stockTableData" border>
            <el-table-column prop="indexBookNumber" label="索书号" ></el-table-column>
            <el-table-column prop="ticketNumber" label="条码号" ></el-table-column>
            <el-table-column prop="shelfMark" label="排架号" ></el-table-column>
            <el-table-column prop="totalBorrowNum" label="借阅次数" ></el-table-column>
            <el-table-column prop="totalRenewNum" label="续借次数" ></el-table-column>
            <el-table-column label="状态" >
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.status == '3'">借出</el-tag>
                    <el-tag type="success" v-if="scope.row.status == '0'">在馆</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog title="评论内容" :visible.sync="commentDialogVisible" width="1200px" append-to-body	>
        <div >
            <div class="mt-8 ml-4">
                <div v-for="(item,index) in commentTableData" :key="index" class="mt-4" style="    border: 1px solid #f4f4f4;padding:10px 20px;">
                    <div>
                        <span>评论人：{{item.fullName}}</span>
                        <span class="ml-9">评论时间：{{item.createTime}}</span>
                    </div>
                    <div class="mt-4 ml-9">
                        <span>{{item.content}}</span>
                    </div>
                </div>

            </div>
            <div style="width:200px;margin:0 auto;margin-top:30px;">

            </div>
        </div>
        <span slot="footer" class="dialog-footer">

            </span>
    </el-dialog>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                bookId:"",
                bookInfo:{},
                mainResponsibilityTableData:[],
                noMainResponsibilityTableData:[],
                stockTableData:[],
                commentTableData:[],
                commentDialogVisible:false,

            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                let bookId = getQueryString("bookId")
                if(bookId){
                    that.bookId = bookId;
                    that.getBookByIdMethod();
                    that.getBookStockByBookIdMethod();
                    that.getCommentMethod();
                }
            });
        },
        methods: {
            //根据id获取图书的信息
            getBookByIdMethod() {
                let that = this;
                requestApiTB("book/getBookById", {"id": that.bookId}, 'POST', function (res) {
                    if (res.code === 0) {
                        that.bookInfo = res.data;
                        that.mainResponsibilityTableData = res.data.mainResponsibilitys;
                        that.noMainResponsibilityTableData = res.data.noMainResponsibilitys;
                    } else {
                        that.$message.error(res.msg);
                    }
                });
            },

            //获取图书的库存信息
            getBookStockByBookIdMethod(){
                let that = this;
                let queryData = {
                    "bookId" : that.bookId,
                    pageNum: 1,
                    pageSize: 2000,
                }
                requestApiTB("book/stock/getBookStockListByBookId",queryData,'POST',function(res){
                    if(res.code === 0){
                        that.stockTableData = res.data.list;
                    }else{
                        alert(res.msg);
                    }
                });
            },
            //展示书籍评论的对话框
            showBookCommentMethod(){
                let that = this;
                that.commentDialogVisible = true;
            },

            //获取书籍评论的方法
            getCommentMethod(){
                let that = this;
                that.commentTableData = [];
                requestApi("comment/getCommentList",{"bookId":that.bookId,"state":1},'post',function (res){
                    that.tableDataLoading = false;
                    if (res.code === 0) {
                        that.commentTableData = res.data.list;
                    }else{
                        alert(res.msg);
                    }
                });

            },


        }
    })
</script>
</html>